<template>
  <el-popover placement="top" width="350" trigger="click" v-model="isShow">
    <ul class="iconBox">
      <li v-for="(item, index) in iconfont.glyphs" :key="index">
        <i :class="['iconfont', iconfont.css_prefix_text + item.font_class]" @click="iconClick(item)"></i>
        <!-- {{item.name}} -->
      </li>
    </ul>
    <!-- <el-input slot="reference" readonly v-model="iconName"></el-input> -->
    <div class="iconContainer" slot="reference">
      <i :class="['iconfont', iconName]"></i>
    </div>
  </el-popover>
</template>

<script>
const iconfont = require('@/assets/iconfont/iconfont.json')
export default {
  name: '',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      iconfont,
      iconName: '',
      isShow: false
    }
  },
  watch: {
    value: {
      handler(val) {
        this.iconName = this.value
      },
      immediate: true
    }
  },
  methods: {
    iconClick(item) {
      this.iconName = `${iconfont.css_prefix_text}${item.font_class}`
      this.$emit('change', this.iconName)
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.iconBox {
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
  height: 200px;
  overflow: auto;
  li {
    cursor: pointer;
    vertical-align: middle;
    padding: 3px;
  }
}
.iconContainer {
  width: 100%;
  height: 32px;
  border: solid 1px #DCDFE6;
  border-radius: 4px;
  background: #fff;
  padding-left: 5px;
}
</style>